<script lang="ts" setup>
import type {MenuRecordRaw} from '@/typings/core';
import type {MenuProps} from '@/components/common/menu';

import {Menu} from '@/components/common/menu';

interface Props extends MenuProps {
  menus: MenuRecordRaw[];
}

const props = withDefaults(defineProps<Props>(), {
  accordion: true,
  menus: () => [],
});

const emit = defineEmits<{
  open: [string, string[]];
  select: [string, string?];
}>();

function handleMenuSelect(key: string) {
  emit('select', key, props.mode);
}

function handleMenuOpen(key: string, path: string[]) {
  emit('open', key, path);
}
</script>

<template>
  <Menu
      :accordion="accordion"
      :collapse="collapse"
      :collapse-show-title="collapseShowTitle"
      :default-active="defaultActive"
      :menus="menus"
      :mode="mode"
      :rounded="rounded"
      :theme="theme"
      @open="handleMenuOpen"
      @select="handleMenuSelect"
  />
</template>
